<template>
  <div class="container">
    <div class="table-cover">
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"

      >
        <el-table-column
          prop="status"
          label="Status"
          width="90"
        >
        </el-table-column>
        <el-table-column
          prop="branch"
          label="Branch"
          width="70"
        >
        </el-table-column>
        <el-table-column
          prop="sender"
          label="Sender">
        </el-table-column>
        <el-table-column
          prop="time"
          label="Time">
        </el-table-column>
        <el-table-column
          prop="price"
          label="Price">
        </el-table-column>
        <el-table-column
          prop="user"
          label="User">
        </el-table-column>
        <el-table-column
          prop="material"
          label="Material">
        </el-table-column>
        <el-table-column
          prop="burdening"
          label="Burdening">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="Operation"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">view</el-button>
            <el-button type="text" size="small">edit</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="10"
        :total="total"
        @current-change="changepage"
      >
      </el-pagination>
    </div>
  </div>

</template>

<script>
  export default {
    name: "GDFunctionUserHistory",
    data() {
      return {
        total:1
      }
    },
    methods:{
      changepage(page) {
        this.$store.commit('setTableData', this.api.getOrderListByUser(null, page - 1));
      },
      handleClick(row) {
        console.log(row);
      },
      tableRowClassName({row, rowIndex}) {
        if (row.status === 'warning') {
          return 'warning-row';
        } else if (row.status === 'success') {
          return 'success-row';
        } else if (row.status === 'sending') {
          return 'sending-row'
        } else if (row.status === 'cancelled') {
          return 'cancelled-row'
        }
        return '';
      }
    },
    computed: {
      tableData() {
        return this.$store.state.tableData;
      }
    },
    mounted() {
      this.total=this.api.getOrderTotalByUser(this.$store.state.user);
      this.$store.commit('setTableData', this.api.getOrderListByUser(this.$store.state.user));
    }
  }
</script>

<style scoped>
.container{
  width: calc(100% - 20px);
  height: 100%;
  border-radius: 4px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
}
.block {
  margin-left: calc(50% + 150px);
  margin-top: 20px;
  transform: translateX(-50%);
}
</style>
